<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from 'vue';
import * as echarts from 'echarts';

// 假设你有一个方法来获取数据
const fetchData = async () => {
  // 这里模拟从后端获取数据
  return [
    { value: 30, name: '物质产品' },
    { value: 30, name: '调节服务' },
    { value: 40, name: '文化服务' },
  ];
};

// 创建一个 ref 来引用图表的 DOM 元素
const chartRef = ref<HTMLElement | null>(null);
// 定义一个变量来存储 ECharts 实例
let peiChart: echarts.ECharts | null = null;

// 定义一个异步函数来渲染饼图
const renderPieChart = async () => {
  // 检查 chartRef 是否已经挂载到 DOM 上
  if (chartRef.value) {
    // 初始化 ECharts 实例
    peiChart = echarts.init(chartRef.value);
    // 获取数据
    const data = await fetchData();

    // 定义图表的配置项
    const option = {
      // 配置提示框组件
      tooltip: {
        trigger: 'item', // 触发类型为数据项
        // axisPointer: {
        //   type: 'shadow'
        // }
      },
      // 配置图例组件
      legend: {
        top: "center", // 图例垂直居中
        left: '70%', // 图例位于容器的 70% 宽度处
        width: '20%', // 图例宽度为容器宽度的 20%
        height: '60%', // 图例高度为容器高度的 60%
        orient: 'vertical', // 图例垂直排列
        itemGap: 30, // 图例项之间的间隔
        itemWidth: 10, // 图例项的宽度
        itemHeight: 10, // 图例项的高度
        textStyle: {
          color: '#fff', // 图例文字颜色
          fontSize: 14, // 图例文字大小
        },
        // data: data.map(item => item.name), // 图例数据，这里注释掉了，可以在获取数据后再设置
      },
      // 配置系列列表
      series: [
        {
          name: '生态产品价值占比', // 系列名称
          type: 'pie', // 系列类型为饼图
          radius: '60%', // 饼图的半径
          center: ['35%', '50%'],
          avoidLabelOverlap: false, // 是否防止标签重叠
          padAngle: 4, // 扇区之间的间隔角度
          itemStyle: {
            borderRadius: 5, // 扇区的圆角半径
          },
          label: {
            show: false, // 是否显示标签
            position: 'center' // 标签位置
          },
          emphasis: {
            label: {
              show: true, // 高亮时显示标签
              fontSize: 20, // 高亮时标签字体大小
              fontWeight: 'bold' // 高亮时标签字体加粗
            }
          },
          labelLine: {
            show: false // 是否显示标签引导线
          },
          data: data.map(item => ({
            ...item,
            itemStyle: {
              color: getColor(item.name) // 根据名称获取颜色
            }
          })),
        }
      ]
    };

    // 设置图表的配置项
    peiChart.setOption(option);
  }
}

// 定义一个函数来根据名称返回颜色
const getColor = (name: string): string => {
  switch (name) {
    case '物质产品':
      return '#33cacb';
    case '调节服务':
      return '#c1aa79';
    case '文化服务':
      return '#01ccfc';
    default:
      return '#CCCCCC'; // 默认颜色
  }
};

// 在组件挂载后执行
onMounted(() => {
  // 延迟初始化图表，以确保 DOM 元素已经渲染完成
  setTimeout(() => {
    renderPieChart();
  }, 200);
});

onBeforeUnmount(
    () => {
      // 在组件销毁前执行
      // 清理图表实例
      if (peiChart) {
        peiChart.dispose();
        peiChart = null;
      }
    }
)
</script>

<template>
  <!-- 引用图表的 DOM 元素，并设置样式 -->
  <div ref="chartRef" style="width: 100%; height: 100%;"></div>
</template>

<style scoped>
/* 你可以根据需要添加样式 */
</style>
